/**
 * 行内缺陷问题详情弹窗
 */

import React from 'react';
import { Button, Dialog, Balloon } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import MarkdownIt from 'markdown-it';
import hljs from 'utils/hl.js';
import { filterXSS } from 'xss';
import intl from '../../../../../../../../../../../locale';

const md = new MarkdownIt({
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {
        return '';
      }
    }

    return ''; // 使用额外的默认转义
  },
});

export default class InlineIssueDetailDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDialogVisible: false,
    };
  }

  onDialogOpen = () => {
    this.setState({ isDialogVisible: true });
  };

  onDialogOk = () => {};

  onDialogCancel = () => {
    this.setState({ isDialogVisible: false });
  };

  render() {
    const { issue } = this.props;
    const { details } = issue;

    if (!details) {
      return null;
    }

    return (
      <div>
        <Button shape="text" onClick={this.onDialogOpen}>
          {intl.get({
            id: 'code-assets.src.utils.locale.Details',
            defaultMessage: '详情',
          })}
        </Button>
        <Dialog
          visible={this.state.isDialogVisible}
          footer={false}
          onClose={this.onDialogCancel}
          title={issue.type}
        >
          <div className="inline-issues-detail">
            {details.map((detail) => {
              const upvoteFeebacks = detail.feedbacks
                ? detail.feedbacks.filter((item) => item.feedback === 'upvote')
                : [];
              const downvoteFeedbacks = detail.feedbacks
                ? detail.feedbacks.filter((item) => item.feedback === 'downvote')
                : [];
              const hasUpvoted = upvoteFeebacks.find(
                (item) => item.user_info.extern_uid === window.FORCE.user.staffId,
              );
              const hasDownvoted = downvoteFeedbacks.find(
                (item) => item.user_info.extern_uid === window.FORCE.user.staffId,
              );
              return (
                <div className="inline-issues-detail-item">
                  <div className="inline-issues-detail-item-title">{detail.name}</div>
                  <div
                    className="markdown-body"
                    dangerouslySetInnerHTML={{
                      __html: filterXSS(md.render(detail.message || ''), {
                        onIgnoreTagAttr: (_, name, value) => {
                          return `${name}=${value}`;
                        },
                      }),
                    }}
                  />
                  <div className="inline-issues-detail-item-feedback-btns">
                    {detail.enable_upvote && (
                      <Balloon
                        align="t"
                        trigger={
                          <span
                            onClick={() => {
                              if (!hasUpvoted) {
                                this.props.postInlineIssuesFeedback({
                                  target_type: 'inline_issue_detail',
                                  target_id: detail.id,
                                  feedback: 'upvote',
                                });
                              } else {
                                this.props.deleteInlineIssuesFeedback({
                                  target_type: 'inline_issue_detail',
                                  target_id: detail.id,
                                  feedback: 'upvote',
                                });
                              }
                            }}
                            className={`inline-issues-feedback-btn ${hasUpvoted ? 'active' : ''}`}
                          >
                            <YunxiaoIcon type="good" />
                            {upvoteFeebacks.length}
                          </span>
                        }
                        closable={false}
                      >
                        {upvoteFeebacks.length ? (
                          <div>
                            {upvoteFeebacks.map((item) => (
                              <a>{item.user_info.name || item.user_info.username} </a>
                            ))}
                            {intl.get({
                              id: 'code-assets.src.utils.locale.FeelUseful',
                              defaultMessage: '觉得有用',
                            })}
                          </div>
                        ) : (
                          <div>
                            {intl.get({
                              id: 'code-assets.src.utils.locale.Useful',
                              defaultMessage: '有用',
                            })}
                          </div>
                        )}
                      </Balloon>
                    )}
                    {detail.enable_downvote && (
                      <Balloon
                        align="t"
                        trigger={
                          <span
                            onClick={() => {
                              if (!hasDownvoted) {
                                this.props.postInlineIssuesFeedback({
                                  target_type: 'inline_issue_detail',
                                  target_id: detail.id,
                                  feedback: 'downvote',
                                });
                              } else {
                                this.props.deleteInlineIssuesFeedback({
                                  target_type: 'inline_issue_detail',
                                  target_id: detail.id,
                                  feedback: 'downvote',
                                });
                              }
                            }}
                            className={`inline-issues-feedback-btn ${hasDownvoted ? 'active' : ''}`}
                            style={{ marginRight: '4px' }}
                          >
                            <YunxiaoIcon type="bad" />
                            {downvoteFeedbacks.length}
                          </span>
                        }
                        closable={false}
                      >
                        {downvoteFeedbacks.length ? (
                          <div>
                            {downvoteFeedbacks.map((item) => (
                              <a>{item.user_info.name || item.user_info.username} </a>
                            ))}
                            {intl.get({
                              id: 'code-assets.src.utils.locale.FeelUseless',
                              defaultMessage: '觉得无用',
                            })}
                          </div>
                        ) : (
                          <div>
                            {intl.get({
                              id: 'code-assets.src.utils.locale.Useless',
                              defaultMessage: '无用',
                            })}
                          </div>
                        )}
                      </Balloon>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </Dialog>
      </div>
    );
  }
}
